<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div id="app">
    <home></home>
  </div>
  <script src="./vue.js"></script>
  <script>
    const Home = {
      /* 
        如果我们 写template vue会自动调用render，将template字符串html结构 编译成虚拟dom
        如果不定义template我们也可以直接调用render 生成虚拟dom
      */
      render: createElement => {
        // render方法的参数 createElement 方法才是真正生成虚拟dom
        // return这个组件的虚拟dom
        /* 
          createElement函数生成一个虚拟dom对象
            参数1 定义标签名
            参数2 标签 各种属性 对象
            参数3 数组 对象 内容
        */
        return createElement('div', {
          attrs: {
            id: 'box'
          },
          'class': {
            container: true
          }
        }, [
          createElement('p', {
            'class': {
              op: true
            }
          }, ['你是p']),
          createElement('span', {}, ['这是span']),
          '这是div文本内容'
        ])
      }
    }
    Vue.component('Home', Home)
    const vm = new Vue({
      el: "#app"
    })
  </script>
</body>

</html>